<template>
    <div class="topic">
        <ul>
            <li v-for="item in (topicArr as any)" :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <h4>{{ item.title }}</h4>
                <p>{{ item.subtitle }}</p>
                <p>￥{{ item.price_info.toFixed(2) }}元起</p>
            </li>
        </ul>
    </div>
</template>

<script name="fhdZhuanTi" lang="ts" setup>
import { ref, watchEffect } from 'vue'
//导入接口
import { gettopicdata } from '../../api/topic'
const page = ref(1);
const size = ref(50)
const topicArr = ref([])
const pagecount = ref<number>(0)

//使用watchEffect监听page变化
watchEffect(()=>{
        gettopicdata({
        page:page.value,
        size:size.value,
    }).then(res =>{
        console.log(res);
        topicArr.value = res.data.data
        pagecount.value = res.data.data.totalPages

})

})

</script>
<style scoped lang="scss">
.topic{
    width: 100%;
    ul{
        li{
            img{
                width: 100%;
            }
            text-align: center;
            line-height: 50px;
            p:last-child{
                color: red;
            }
        }
    }
}
</style>